// 1.引入 Vue
import Vue from "vue";

// 2.引入 VueRouter
import VueRouter from "vue-router";

// 引入公共组件（我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件）
const Details = () => import("@/components/Details");

// 5.引入路由组件
const About = () => import("@/pages/About");
const Home = () => import("@/pages/Home");

const Messages = () => import("@/pages/Home/Messages");
const News = () => import("@/pages/Home/News");

// 3.注册路由插件
Vue.use(VueRouter);

// 4.创建路由映射表
const routes = [
  { path: "/about", component: About },
  {
    path: "/home",
    component: Home,
    children: [
      { path: "news", component: News },
      {
        path: "messages",
        component: Messages,
        // 传递params参数时，参数的值千万不能是空字符串 ? 可传可不传
        children: [
          {
            path: "details/:id/:title?",
            component: Details,
            name: "details",
            // 布尔值
            // 对象
            // 函数
            props: ({ params: { id, title } }) => {
              return { id, title };
            },
          },
        ], // name 用于 paramse 对象形式的传参
      },
      // 默认子路由（地址上不会显示该路由的路径，也就是 path）
      { path: "", component: News },
    ],
  },
  // 路由重定向
  { path: "/", redirect: "/about" },
  // 默认子路由（地址上不会显示该路由的路径，也就是 path）
  // { path: "", component: About },
];

// 6.创建路由实例并暴露
export default new VueRouter({
  // 默认 hash 模式 location.pushState
  mode: "history", // 地址中没有 # 更优雅
  routes,
});
